<template>
  <div class="cart">
    <nav-bar bgc="pink">
      <template #center>
        <h1>购物车{{cartNum}}</h1>
      </template>
    </nav-bar>
    <fixed-box class="fixed" v-if="isLogin==false">
      <button @click="login">
        <span class="login">登录</span>
      </button>
    </fixed-box>
    <fixed-box class="fixed" v-if="isNull">
      <button>
        <span class="isnull">空空如也呢</span>
      </button>
    </fixed-box>
    <div class="content" v-if="isLogin==true&&isNull==false">
      <card></card>
      <submit-bar v-if="isNull==false"></submit-bar>
    </div>
  </div>
</template>

<script>
import Card from "components/private/cart/CartCard";
import SubmitBar from "components/private/cart/CartSubmitBar"
import FixedBox from "components/public/fixed_box/FixedBox";
import NavBar from "components/public/navbar/NavBar";
export default {
  name: "Cart",
  components: {
    FixedBox,
    NavBar,
    Card,
    SubmitBar
  },
  computed: {
    isLogin: {
      get(){
        return this.$store.state.uid ? true : false;
      },
      set(v){
        return v;
      }
      
    },
    isNull() {
      if (this.$store.state.cart) {
        return this.isLogin == true && this.$store.state.cart.length == 0;
      }
    },
    cartNum() {
      if (this.$store.state.cart) {
        return `(${this.$store.state.cart.length})`;
      }
    }
  },
  methods: {
    login() {
      this.$router.push("/login");
    }
  },
  created() {
    this.$store.dispatch("updateUser");
    this.$store.dispatch("updateCart");
    this.$bus.$on('logout',()=>{
      // console.log(this.isLogin);
      this.isLogin=!this.isLogin;
      
    })
    
  }
};
</script>

<style lang="less" scoped>
.cart {
  margin-top: 45PX;
  margin-bottom: 40PX;
  padding-bottom: 40px;
  background-color: #fff;
  .fixed {
    top: 50%;
    width: 100%;
    button {
      width: 100%;
      height: 40px;
      border-radius: 40px;
      outline: none;
      border: none;
      background-color: rosybrown;
      span {
        position: relative;
        padding-left: 30px;
      }
      span::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-image: url("~assets/images/icon/login.svg");
        background-size: 100%;
      }
      .isnull::before {
        background-image: url("~assets/images/icon/cart.svg");
      }
    }
  }
  .content {
    h1 {
      text-align: center;
      font-weight: 400;
      font-size: 18px;
    }
  }
}
</style>